<template>
	<view class="bg-drak" :class="[empty ? '' : 'padding-tb']">
		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" tip="无渠道数据" ></use-empty>

		<view v-else class="padding-lr" v-for="(item, index) in datas" :key="index">
			<view class="product border-radius padding margin-bottom-sm bg-main" style="padding-bottom: 15rpx;"
				@click="copyMobile(item.member_mobile)">
				<view class="left">
					<image :src="item.member_headimg || '/static/images/user/default.png'" mode="aspectFill"></image>
				</view>
				<view class="margin-left-sm pos-r w-full">
					<text class="clamp-2">{{ item.member_name}}</text>
					<view class="text-xs">号码:{{item.member_mobile}}</view>
					<view class="text-xs">{{item.market_level_name}}</view>
					<view class="text-xs">注册时间:{{$api.format(item.create_time, 'yyyy-MM-dd hh:mm')}}</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载更多 -->
		<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150"></use-totop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				// 加载更多状态
				loadmoreType: 'nomore',
				// 数据源
				datas: [],
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
			};
		},
		watch: {
			datas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onLoad: function() {
			this.loadData();
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		methods: {
			loadData() {
				this.$func.wmzmall.call('channel/list').then(res => {
					if (res.code == 200) {
						this.datas = res.datas.data
					}
				});
			},
			copyMobile(mobile) {
				let _this = this
				uni.setClipboardData({
					data: mobile,
					showToast: false,
					success: function() {
						_this.$api.msg('复制号码成功');
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.product {
		display: flex;

		.left {
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.price-box {
			bottom: -20rpx;
		}
	}
</style>